<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaleSmartly Chat SDK</title>
    <style>
        body {
            display: flex;
            place-items: center;
            height: 100vh;
        }

        button {
            border-radius: 8px;
            border: 1px solid transparent;
            padding: 0.6em 1.2em;
            font-size: 1em;
            font-weight: 500;
            font-family: inherit;
            background-color: #1a1a1a;
            cursor: pointer;
            transition: border-color 0.25s;
            background-color: #f9f9f9;
        }

        button:hover {
            border-color: #646cff;
        }
    </style>
</head>

<body>
    <div style="margin: 0 auto; text-align: center;">
        <button onclick="window.ssq.push('chatOpen')">打开聊天窗</button>
        <button data-id="setLoginInfo">设置登录信息</button>
        <button onclick="window.ssq.push('clearUser')">清除登录信息</button>
        <button data-id="sendTextMessage">发送文字消息</button>
    </div>

    <!-- 替换成您的sdk -->
    <script src="https://plugin-code.salesmartly.com/js/project_xxxxxxxxx.js"></script>

    <script>
        // 设置聊天插件图标隐藏，可配合打开窗口api实现自定义图标
        window.__ssc.setting = { hideIcon: true };

        var isChatStarted = false;
        // 监听消息发送事件
        window.ssq.push('onSendMessage', obj => {
            // 给google上报chat_started事件
            if (!isChatStarted) {
                isChatStarted = true;
                gtag('event', 'chat_started');
            }
        });
        // 打开聊天窗
        window.ssq.push('onOpenChat', () => {
            console.log('onOpenChat');
        });
        // 关闭聊天窗
        window.ssq.push('onCloseChat', () => {
            console.log('onCloseChat');
        });

        // 监听打开信息收集
        window.ssq.push('onOpenCollection', (obj) => {
            // obj.type = 'offline' 离线留资
            // obj.type = 'survey' 聊前留资
            console.log(obj)
        });

        // 监听完成信息收集
        window.ssq.push('onCollectionInfo', (obj) => {
            //obj包含了用户在信息收集过程中提供的数据
            console.log(obj)
        });

        // 监听点击Line图标
        window.ssq.push('onOpenLine', (obj) => {
            // 在这里执行点击Line图标后的操作
            console.log('Line icon clicked', obj);
        });

        // 监听点击Messenger图标
        window.ssq.push('onOpenMessenger', (obj) => {
            // 在这里执行点击Messenger图标后的操作
            console.log('Messenger icon clicked', obj);
        });

        // 监听点击Email图标
        window.ssq.push('onOpenEmail', (obj) => {
            // 在这里执行点击Email图标后的操作
            console.log('Email icon clicked', obj);
        });

        // 监听点击Telegram图标
        window.ssq.push('onOpenTelegram', (obj) => {
            // 在这里执行点击Telegram图标后的操作
            console.log('Telegram icon clicked', obj);
        });

        // 监听点击Whatsapp图标
        window.ssq.push('onOpenWhatsapp', (obj) => {
            // 在这里执行点击Whatsapp图标后的操作
            console.log('Whatsapp icon clicked', obj);
        });

        // 监听点击微信图标
        window.ssq.push('onOpenWeixin', (obj) => {
            // 在这里执行点击微信图标后的操作
            console.log('Weixin icon clicked', obj);
        });

        // 监听未读信息
        window.ssq.push('onUnRead', function (obj) {
            console.log(obj.num); // 未读数量
            console.log(obj.list); // 未读内容
        });

        const handleLogin = () => {
            window.ssq.push('setLoginInfo', {
                user_id: '1vme37svub8', // 加密后的用户 id, 必填  对应用户的channel_uid
                user_name: 'test', // 对应用户名
                language: 'zh-CN', // 对应用户语言
                phone: '17311112222', // 对应用户手机号
                email: 'test@test', // 对应用户邮箱
                description: '套餐B\n客户端\n收费客户', // 对应客户资料的用户描述信息，例如套餐信息
                label_names: ['标签值1', '标签值2'], // 对应用户标签，仅支持传系统已创建的标签值
            });
        }

        const handleSendTextMessage = () => {
            // 先打开聊天窗
            window.ssq.push('chatOpen')
            setTimeout(() => {
                window.ssq.push('sendTextMessage', '发送了一条文本消息');
            }, 500)
        }

        const buttons = document.querySelectorAll('button');
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const id = button.getAttribute('data-id');
                switch (id) {
                    case 'setLoginInfo':
                        handleLogin();
                        break;
                    case 'sendTextMessage':
                        handleSendTextMessage();
                        break;
                }
            })
        })
    </script>
</body>

</html>